import React, { Component,createRef } from 'react'
import Footer from './Footer'
console.log(React)
export default class Index extends Component {
    constructor() {
        super()
        this.refDom2 = React.createRef()
    }
    add = ()=>{
        // document.querySelector("#input").getAttributeNode
        console.log(this.refDom.current.value)
        console.log(this.refDom1.current.getAttributeNode("title").nodeType,"11")   // nodeType类型为1，为元素节点,2属性节点，3是文本节点
        console.log(this.refDom2.current.firstChild.firstElementChild.nodeType,"12")
    //    console.log(this.refs.input.value) 
   
    }
    refDom = createRef()
    refDom1 = React.createRef()
    callFn=({name,age})=>{
        console.log(name,age)
        alert(`我叫${name}今年${age}岁`)
    }
    render() {
        return (
        <div>
            {/* 字符串形式的获取dom元素 */}
            {/* <input type="text" ref="input" id="input" placeholder='请输入'/> */}
            {/* 函数形式的获取dom元素的ref使用 */}
            {/* <input type="text" ref={(c)=>{this.inputddd = c}} id="input" placeholder='请输入'/> */}
            {/* 使用官方提供的ref方法 */}
            <input type="text" ref={this.refDom} placeholder='请输入'/>
            <button onClick={this.add} ref={this.refDom1} title="添加按钮">添加</button>
            <p ref={this.refDom2}><span>我是p标签</span></p>
            <Footer name="关羽" age={18} callFn={this.callFn}></Footer>
        </div>
        )
    }
}
